<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题练习</title>
    <link rel="stylesheet" href="Reset.css" />
    <style>
      .face {
        border: dashed 1px;
        background-color: chartreuse;
      }

      .face::after {
        /* 子元素浮动会导致父元素的高度塌陷。伪元素选择器，可以清楚父元素中子元素的浮动 , 下面的三个缺一不可*/
        content: "";
        display: block;
        clear: both;
      }
      div {
        margin: 5px;
      }
      .div1 {
        width: 200px;
        height: 200px;
        float: right;
        background-color: blue;
      }
      .div2 {
        background-color: black;
        width: 200px;
        height: 200px;
        float: right;
      }
      .div3 {
        background-color: brown;
        width: 200px;
        height: 200px;
        float: right;
      }
      .div4 {
        background-color: cadetblue;
        width: 200px;
        height: 200px;
        float: right;
      }

      .di0 {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
      }
      .di1 {
        width: 100px;
        height: 100px;
        background-color: cyan;
        margin: 50px;
      }
      .di0::after {
        /* 在不浮动的情况下，子元素设置margin会导致父元素跟着动，可以设置伪元素，下面的属性也是缺一不可 */
        content: "";
        display: table;
      }

      .di2 {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
        margin: 100px;
      }
      .di3 {
        width: 100px;
        height: 100px;
        left: 20px;
        top: 20px;
        background-color: cyan;
        position: relative;
      }
      .di4 {
        width: 100px;
        height: 100px;
        background-color: darkgreen;
      }

      .dj0 {
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
        margin: 100px;
        position: fixed;
      }

      .dj2 {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
        margin: 100px;
      }

      .dj3 {
        width: 100px;
        height: 100px;
        background-color: cyan;
      }
      .dj4 {
        width: 100px;
        height: 100px;
        background-color: darkgreen;
        /* position: absolute; */
        right: 100px;
      }

      .fu {
        width: 200px;
        height: 200px;
        background-color: darkkhaki;
        position: relative;
      }
      .zi {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: darkorange;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
      }

      .p1 {
        width: 400px;
        background-color: darkorange;
        font-size: 50px;
        color: #777;
        font-family: sans-serif;
        /* text-align: justify; */ /* 除了左后一行都两端对齐 */
        line-height: 1.5em;

        overflow: hidden;

      }
      .samp {
        font-size: 20px;
        vertical-align: middle;
      }
      img{
        vertical-align: bottom; /* 插入图面会有留白，设置这个会消除留白 */
      }
    </style>
  </head>
  <body>
    <div class="dj0"></div>

    <div class="face">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </div>

    margin

    <div class="di0">
      <div class="di1"></div>
    </div>

    定位,可以微调，不会脱离文档流
    <hr />
    相对定位
    <div class="di2">
      <div class="di3"></div>
      <div class="di4"></div>
    </div>
    <hr />
    绝对定位,脱离文档流,基于开启定位的定位的元素去定位，如果都没开就基于当前浏览器定位,一般少用
    <div class="dj2">
      <div class="dj3"></div>
      <div class="dj4"></div>
    </div>
    <p>粘滞定位可以相对多少就不动了</p>

    <hr />
    绝对定位的用法,子元素居中

    <div class="fu">
      <div class="zi"></div>
    </div>

    <hr />
    字体练习：
    <hr />

    <i class="fab fa-app-store"></i>
    <p class="p1">
      今天<img src="../图片/img/a1.jpeg"  style="width: 50px;" alt="" />今天在下雨Run<span class="samp"
        >Raining</span
      >
    </p>
    
  </body>
</html>
